<template>
  <div class="hkjcc">
    <Header>
      收藏
    </Header>
    <div class="main">
      <div v-if="kg">
        <ul class="mm">
          <li v-for="(i, index) of list" :key="i.proid">
            <div>
              <img :src="i.proimg" alt="加载失败">
              <div>
                <h4>{{ i.proname }}</h4>
                <p>￥ {{ i.bigp || i.middlep }}</p>
              </div>
            </div>
            <div class="bottom">
              <span @click="detail(i.proid)">商品详情</span><span @click="quxiao(i.proid, index)">取消收藏</span>
            </div>
          </li>
        </ul>
      </div>
      <div v-else class="nul">
        你还没有收藏商品<router-link to='/home'>去逛逛</router-link>
      </div>
    </div>
  </div>
</template>
<style lang="scss" scored>
@import '@/lib/reset.scss';
.hkjcc {
  @include rect(100%,100%);
  @include flexbox();
  @include flex-direction(column);
  header {
    @include flexbox();
    @include justify-content(space-between);
  }
  .main {
    @include flex();
    @include rect(100%,auto);
    overflow: auto;
    .mm {
      @include rect(100%,auto);
      @include flexbox();
      @include flex-direction(column);
      @include align-items();
      li {
        @include rect(94%,auto);
        @include margin(0.1rem 0);
        // @include border(1px,#eee,solid);
        &>div:nth-child(1) {
          @include flexbox();
          // @include border(0 0 1px,#eee,solid);
          @include padding(0.05rem);
          img {
            @include rect(1rem,1rem);
            @include margin(0 0.3rem 0 0);
          }
          h4 {
            @include font-size(20px);
            @include margin(0.1rem 0);
            @include color(#555);
          }
          p {
            @include font-size(16px);
            @include color(#e22);
          }
        }
        .bottom {
          @include rect(100%,0.44rem);
          @include font-size(14px);
          @include line-height(0.32rem);
          @include padding(0 0.1rem);
          @include flexbox();
          @include justify-content(flex-end);
          @include align-items();
          span {
            @include margin(0 0 0 0.1rem);
            @include display(block);
            @include rect(0.8rem,0.32rem);
            // @include border(1px,#ddd,solid);
            @include color(#666);
            @include text-align();
            border: 1px #ddd solid;
            border-radius: 0.16rem;
          }
        }
      }
    }
  }
  .nul {
    text-align: center;
    font-size: 20px;
    line-height: 1rem;
  }
}
</style>
<script>
import Header from '@/components/header.vue'
import axios from '@/utils/request'
// import Vue from 'vue'
import { Toast } from 'vant'
// Vue.use(Toast)
export default {
  data () {
    return {
      list: '',
      kg: false,
      userid: ''
    }
  },
  components: {
    Header
  },
  created () {
    this.userid = localStorage.userid
    axios.get('/shoucang?userid=' + this.userid).then(res => {
      if (res.data.code === '303') {
        this.kg = false
      } else {
        var p = []
        var list = []
        res.data.data.map((item, i) => {
          p[i] = new Promise((resolve, reject) => {
            axios.get('/pro/detail?proid=' + item.proid).then(res => {
              list.push(res.data[0])
              resolve()
            })
          })
        })
        Promise.all(p).then(() => {
          this.list = list
          this.kg = true
        })
      }
    })
  },
  methods: {
    quxiao (id, i) {
      axios.get('/shoucang?userid=' + this.userid + '&proid=' + id).then(res => {
        if (res.data.code === '303') {
          Toast('取消收藏失败')
        } else {
          axios.get('/shoucang/del?scid=' + res.data.data[0].scid).then(() => {
            this.list.splice(i, 1)
            Toast('取消收藏成功')
          })
        }
      })
    },
    detail (id) {
      this.$router.push('/detail/' + id)
    }
  }
}
</script>
